<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-lx-cascades"></i> 首页</el-breadcrumb-item>
                <el-breadcrumb-item> 系统管理</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/systemUser' }"> 系统用户</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form ref="form" :model="query" label-width="80px">
                <div class="itemBox">
                    <el-form-item label="账号" class="w33">
                        <el-input v-model="query.username"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" class="w33">
                        <el-input v-model="query.name"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" class="w33">
                        <el-select v-model="query.sex">
                            <el-option label="男" value="男"></el-option>
                            <el-option label="女" value="女"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="手机号码" class="w33">
                        <el-input v-model="query.phone"></el-input>
                    </el-form-item>

                    <el-form-item label="用户状态" class="w33">
                        <el-select v-model="query.status" class="w100">
                            <el-option label="请选择状态" value="0"></el-option>
                            <el-option label="冻结" value="1"></el-option>
                            <el-option label="正常" value="2"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item class="buttonBox  w33">
                        <el-button type="primary" icon="el-icon-search" @click="search">筛选</el-button>
                        <el-button icon="el-icon-delete" @click="clear"></el-button>
                    </el-form-item>
                </div>
            </el-form>
            <el-button type="primary" @click="handleAdd">新增用户</el-button>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="username" label="用户账号" width="width" align="center">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="width" align="center">
                </el-table-column>
                <el-table-column prop="img" label="头像" width="150" align="center">
                    <template slot-scope="{row}">
                        <img :src="`http://www.img.ttblog.cn/` + row.img" alt="" style="height: 100px;">
                    </template>
                </el-table-column>
                <el-table-column prop="sex" label="性别" width="width" align="center">
                </el-table-column>
                <el-table-column prop="birthday" label="生日" width="width" align="center">
                </el-table-column>
                <el-table-column prop="phone" label="手机号" width="width" align="center">
                </el-table-column>
                <el-table-column prop="department" label="部门" width="width" align="center">
                    <template slot-scope="scope">
                        {{ checkBm(scope.row.department) }}
                    </template>
                </el-table-column>
                <el-table-column prop="department" label="负责部门" width="width" align="center">
                    <template slot-scope="scope">
                        {{ checkBm(scope.row.department) }}
                    </template>
                </el-table-column>
                <el-table-column prop="statusName" label="状态" width="widthv" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.status == 1 ? '正常' : '冻结' }}
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="200" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" style="margin-right: 10px;"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-dropdown split-button type="primary">
                            更多
                            <el-dropdown-menu slot="dropdown">
                                <!-- 添加下级接口500错误 -->
                                <el-button @click='handleDetail(scope.$index, scope.row)'>详细</el-button>
                                <el-button @click="handleDelete(scope.row)">删除</el-button>
                                <el-button @click="changeStatus(scope.row)">{{ checkStastus(scope.row) }}</el-button>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handlePageChange"
                    :current-page="query.pageNum" :page-sizes="[1, 2, 3, 4]" :page-size="2"
                    layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
                </el-pagination>
            </div>
        </div>
        <!-- 弹出框 -->
        <el-dialog :visible.sync="editVisible" width="50%" :closeOnClickModal="false" @close="cancle">
            <EditUserPopUp v-if="editVisible" :id="id" :isEdit="isEdit" :isDetail="isDetail" :bmList="bmData"
                :roleList="roleList" :zwList="zwList"></EditUserPopUp>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancle">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { selectSystemUsers, selectbm, updateSystemUser, addSystemUser, deleteSystemUser, updateSystemUserStatus, selectUserSystemRoles, selectzw } from '@/api/systemManager'
import EditUserPopUp from '@/components/page/SystemManager/dialog/EditUserPopUp'
import bus from '@/components/common/bus';
export default {
    data() {
        return {
            query: {
                pageNum: 1,
                pageSize: 2,
                username: '',
                name: '',
                sex: '',
                phone: '',
                status: '0',
            },
            pageTotal: 0,
            tableData: [],
            bmData: [],
            roleList: [],
            zwList: [],
            editVisible: false,
            id: '',
            isEdit: false,
            isDetail: false,
            formObj: {},
            str: ''
        };
    },
    components: {
        EditUserPopUp,
    },
    mounted() {
        this.getData()
        this.getBmData()
        //获取弹窗表单的数据
        bus.$on('getFormObj', (val) => {
            this.formObj = val
        })
        this.getRoleData()
        this.getZwData()
    },
    methods: {
        //获取表格信息
        async getData() {
            let result = await selectSystemUsers(this.query)
            if (result.code == 200) {
                this.tableData = result.data.list
                this.pageTotal = result.data.total
            }
        },
        //获取部门信息
        async getBmData() {
            let result = await selectbm()
            this.bmData = result
        },
        //弹出编辑框
        handleEdit(index, row) {
            this.isEdit = true
            this.editVisible = true
            this.id = row.id
        },
        handleDetail(index, row) {
            this.isDetail = true
            this.editVisible = true
            this.id = row.id
        },
        //添加
        handleAdd() {
            this.editVisible = true
        },
        //页码改变时
        handlePageChange(val) {
            this.query.pageNum = val
            this.getData();
        },
        //一页大小改变时
        handleSizeChange(val) {
            this.query.pageSize = val
            this.getData();
        },
        //获取部门
        checkBm(val) {
            let dicname = ''
            this.bmData.forEach(item => {
                if (val == item.id) {
                    dicname = item.dicname
                    return
                }
            })
            return dicname
        },

        //取消按钮
        cancle() {
            this.editVisible = false
            this.isEdit = false
            this.isDetail = false
        },
        //保存编辑
        async saveEdit() {
            if (this.isEdit || this.isDetail) {
                let result = await updateSystemUser(this.formObj)
                if (result.code == 1) {
                    this.$message({ message: result.msg, type: 'success' })
                    this.getData()
                }

            } else {
                let result = await addSystemUser(this.formObj)
                if (result.code == 1) {
                    this.$message({ message: result.msg, type: 'success' })
                    this.getData()
                }
            }
            this.cancle()

        },
        //删除
        async handleDelete(row) {
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            }).then(async () => {
                let result = await deleteSystemUser({ id: row.id })
                if (result.code == 1) {
                    this.$message({ message: result.msg, type: 'success' })
                    this.getData()
                }
            })
                .catch(() => { });
        },
        async changeStatus(row) {
            let result = await updateSystemUserStatus({ id: row.id, status: row.status })
            if (result.code == 1) {
                this.$message({ message: result.msg, type: 'success' })
                this.getData()
            }

        },
        checkStastus(row) {
            return row.status == 1 ? '冻结' : '解冻'
        },
        //获取角色数据
        async getRoleData() {
            let result = await selectUserSystemRoles({ rolename: '' })
            if (result.code == 200) {
                this.roleList = result.data
            }
        },
        //获取职务数据
        async getZwData() {
            let result = await selectzw()
            this.zwList = result
        },
        async search() {
            this.query.pageNum = 1
            let result = await selectSystemUsers(this.query)
            if (result.code == 200) {
                this.tableData = result.data.list
                this.pageTotal = result.data.total
                this.$message({ message: result.msg, type: 'success' })
            } else {
                this.$message({ message: result.msg, type: 'error' })
            }
        },
        clear() {
            this.query = {
                pageNum: 1,
                pageSize: 2,
                username: '',
                name: '',
                sex: '',
                phone: '',
                status: '0',
            }
            this.search()
        }
    },



};
</script>

<style scoped>
.itemBox {
    display: flex;
    justify-content: space-between;
    /* 调整为 space-between */
    flex-wrap: wrap;
    /* 允许自动换行 */
    align-items: center;
}

.w33 {
    width: 33%;
}

.w100 {
    width: 100%;
}
</style>
